<!--
 * @Date: 2025-02-28 10:06:36
 * @LastEditors: MsChen Your email MsChen
 * @LastEditTime: 2025-02-28 11:26:02
 * @FilePath: /finance/Users/chenyufan/Downloads/框架/glm-mes-pc-ui/glm-mes-pc-MES_框架/src/views/logistics/order.vue
-->

<script setup>
import { onMounted, ref } from 'vue'
import { getListAPI } from '@/api/wuliuOrder.js'
const formRef = ref()

const dataList = ref([])
const pagination = ref({
	total: 0,
	pageSize: 10,
	pageNum: 1,
  buType: 1
})

//接口请求参数
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
let orderStartTime = ref(new Date(currentYear, currentMonth))
let orderEndTime = ref(new Date(currentYear, currentMonth))


// 请求数据
const fetchData = async (prame) => {
    // 校验开始时间不能大于结束时间
    if (orderStartTime.value > orderEndTime.value) {
        proxy.$modal.msgError('开始时间不能大于结束时间')
        return
    }
    try {
        let params = {
            orderStartTime: `${orderStartTime.value.getFullYear()}${String(orderStartTime.value.getMonth() + 1).padStart(2, '0')}`,
            orderEndTime:`${orderEndTime.value.getFullYear()}${String(orderEndTime.value.getMonth() + 1).padStart(2, '0')}`,
            queryType: prame,
            ...pagination.value
        };
        const { code, rows, total } = await getListAPI(params)
        if (code === 200) {
            dataList.value = rows
            pagination.value.total = total

        }
    } catch (error) {
        console.error('数据请求失败', error)
    }
}

const handleSizeChange = () => {
	console.log('111')
}
const handlePageChange = (val) => {
	pagination.value.pageNum = val
    fetchData()
}
onMounted(() => {
    fetchData()
})
</script>

<template>

    <div class="demo-date-picker">
        <div class="block">
            年月：
        </div>
        <div class="block">
            <el-date-picker v-model="orderStartTime" type="month" placeholder="开始年月" />
        </div>
        <span class="block">至</span>
        <div class="block">
            <el-date-picker v-model="orderEndTime" type="month" placeholder="结束年月" />
        </div>
        <div style="margin-left: 10px;">
            <el-button @click="fetchData()">查询</el-button>
            <el-button @click="fetchData(6)">上个月</el-button>
            <el-button @click="fetchData(7)">本月</el-button>
            <el-button @click="fetchData(8)">半年</el-button>
            <el-button @click="fetchData(9)">本年</el-button>
        </div>
    </div>
	<div class="card">
		<el-table :data="dataList" style="width: 100%" border>
			<el-table-column prop="waybillNo" label="运单号" width="300" />
      <el-table-column prop="kuaidicomName" label="快递公司" width="180" />
			<el-table-column prop="sjPrice" label="运费" width="80" />
			<el-table-column prop="sendTime" label="发货时间" width="180" />
			<el-table-column prop="deptName" label="所属部门" />
      <el-table-column prop="sendName" label="发货人" width="180" />
			<el-table-column prop="sendPhone" label="发货人手机" width="200" />
      <el-table-column prop="sendAddressDetail" label="发货人地址" width="300" />
      <el-table-column prop="recName" label="收货人姓名" width="200" />
			<el-table-column prop="recPhone" label="收货人手机" width="200" />
			<el-table-column prop="recAddressDetail" label="收货人地址" width="300" />
      <el-table-column prop="orderTime" label="下单时间" width="180" />-
		</el-table>
	</div>
	<div class="card">
		<el-pagination
			:current-page="pagination.pageNum"
			:page-size="pagination.pageSize"
			background
			layout="prev, pager, next"
			:total="pagination.total"
			@size-change="handleSizeChange"
			@current-change="handlePageChange"
			style="justify-content: right"
		/>
	</div>
</template>

<style lang="scss" scoped>
.btns {
	margin-bottom: 20px;
}
.card {
	background: #fff;
	margin: 20px;
	padding: 20px 20px 0 20px;
}

.demo-date-picker {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  margin-left: 10px;
  /* border-right: solid 1px var(--el-border-color); */
  /* flex: 1; */
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
